<template>
    <div class="app-container">
        <!-- 返回按钮 -->
        <el-button icon="el-icon-arrow-left" @click="goBack" class="mb8">返回</el-button>



        <!-- 优化后的表格 -->
        <el-table ref="table" :data="combinedList" v-loading="loading" stripe highlight-current-row border
             style="width: 100%; margin-top: 20px" :fit="true"
            empty-text="暂无数据">
            <!-- 名称列增加溢出处理 -->
            <el-table-column label="名称" prop="docName" align="center" min-width="180" :show-overflow-tooltip="true" />

            <!-- 编号列增加大写转换 -->
            <el-table-column label="编号" align="center" :sortable="true" min-width="200">
                <template #default="{ row }">
                    <span class="uppercase">{{ row.docNumber }}</span>
                </template>
            </el-table-column>

            <!-- 版本信息合并显示 -->
            <el-table-column label="版本" align="center" min-width="120">
                <template #default="{ row }">
                    <el-tag type="success" effect="dark">
                        {{ row.versionIdentifier }}.{{ row.iterationIdentifier }}
                    </el-tag>
                </template>
            </el-table-column>

            <!-- 格式类型展示 -->
            <el-table-column label="文件格式" align="center" min-width="120">
                <template #default="{ row }">
                    <el-tag :type="formatTagType(row.pictureFormat)">
                        {{ row.pictureFormat.toUpperCase() }}
                    </el-tag>
                </template>
            </el-table-column>

            <!-- 时间列优化 -->
            <el-table-column label="更新时间" :sortable="true" align="center" min-width="180">
                <template #default="{ row }">
                    <span class="time-text">
                        {{ formatDateTime(row.updateTime) }}
                    </span>
                </template>
            </el-table-column>



            <!-- 操作列优化 -->
            <el-table-column label="操作" align="center" header-align="center" width="150" fixed="right">

                <template #default="{ row }">
                    <el-button type="text" :disabled="!isPdfFormat(row.pictureFormat)" @click="handlePreview(row)"
                        v-hasPermi="['system:docdraw:download']" v-if="isPdfFormat(row.pictureFormat)">
                        预览
                    </el-button>
                    <el-tooltip v-else content="仅支持PDF格式预览" placement="top">
                            <el-button type="text" disabled class="disabled-preview-btn">
                                预览
                            </el-button>
                    </el-tooltip>



                    <el-button type="text" @click="handleDownload(row)"
                        v-hasPermi="['system:docdraw:download']">下载</el-button>
                </template>
            </el-table-column>
        </el-table>


    </div>
</template>

<script>
import { docDrawList, downloadDraw, downloadDrawStr } from '@/api/system/docdraw'
import moment from 'moment'

export default {
    name: 'CombinedDocView',
    data() {
        return {
            loading: false,
            isPDF: true,
            combinedList: [],  // 合并后的数据列表
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10
            }
        }
    },
    created() {
        this.loadData()
    },
    methods: {
        // 加载数据
        async loadData() {
            try {
                this.loading = true
                const docId = this.$route.query.docId
                const res = await docDrawList(docId)
                if (res.code === 200 && res.rows) {
                    this.combinedList = res.rows.map(item => ({
                        ...item,
                        // 添加需要转换的字段（如有需要）
                    }))

                    this.total = res.total
                    // this.$message.success('图纸查询成功');
                }
            } catch (error) {
                this.$message.error('数据加载失败')
            } finally {
                this.loading = false
            }
        },
        // 返回
        goBack() {
            this.$router.go(-1)
        },

        // 新增格式标签类型判断
        formatTagType(format) {
            const typeMap = {
                plt: 'warning',
                dwg: 'info',
                pdf: 'danger'
            }
            return typeMap[format.toLowerCase()] || 'success'
        },
        // 日期格式化
        formatDateTime(date) {
            return moment(date).format('YYYY-MM-DD HH:mm:ss')
        },

        // handleDownload(row) {
        //     console.log('下载文档:', row.drawId)
        //     this.$message.success(`开始下载 ${row.versionIdentifier} 版本`)
        // },


        // 组件methods中修改下载方法
        handleDownloadStr(row) {
            this.$confirm(`确认下载 ${row.drawName} 文件吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                downloadDrawStr(row.drawId).then(response => {

                    if (response.code == 200) {
                        window.open(response.data);
                    } else {
                        this.$message.error(response.msg);
                    }

                })
                    .catch(error => {
                        this.loading = false;
                        this.$message.error('下载失败');
                    });
            }).catch(() => { })
        },


        handleDownload(row) {
            this.$confirm(`确认下载 ${row.drawName} 文件吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                downloadDraw(row.drawId, { responseType: 'blob' })
                    .then(response => {
                        // 安全获取文件名
                        const contentDisposition = response.headers &&
                            (response.headers['content-disposition'] ||
                                response.headers['Content-Disposition']);

                        let fileName = row.drawName;
                        if (contentDisposition) {
                            const fileNameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                            const matches = fileNameRegex.exec(contentDisposition);
                            if (matches && matches[1]) {
                                fileName = matches[1].replace(/['"]/g, '');
                                // 处理UTF-8编码的文件名
                                fileName = decodeURIComponent(fileName);
                            }
                        }

                        // 创建Blob链接
                        const blob = new Blob([response]);
                        const downloadUrl = window.URL.createObjectURL(blob);

                        // 创建隐藏的<a>标签触发下载
                        const link = document.createElement('a');
                        link.href = downloadUrl;
                        link.download = fileName;
                        link.style.display = 'none';
                        document.body.appendChild(link);
                        link.click();

                        // 清理资源
                        document.body.removeChild(link);
                        window.URL.revokeObjectURL(downloadUrl);
                    })
                    .catch(error => {
                        // 统一错误处理
                        if (error.response) {
                            // 处理blob类型的错误响应（如后端返回JSON）
                            if (error.response.data instanceof Blob) {
                                const reader = new FileReader();
                                reader.onload = () => {
                                    try {
                                        const errorJson = JSON.parse(reader.result);
                                        this.$message.error(errorJson.msg || '下载失败');
                                    } catch (e) {
                                        this.$message.error('下载失败：无效的响应格式');
                                    }
                                };
                                reader.readAsText(error.response.data);
                            } else {
                                this.$message.error(`下载失败：${error.response.statusText}`);
                            }
                        } else {
                            this.$message.error('网络错误，请检查连接');
                        }
                    });
            }).catch(() => { });
        },

        // 新增预览方法
        handlePreview(row) {
                // 二次验证文件格式
            if (!this.isPdfFormat(row.pictureFormat)) {
            this.$message.warning('当前文件格式不支持预览')
            return
            }


            this.$confirm(`确认预览 ${row.drawName} 文件吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                downloadDraw(row.drawId, { responseType: 'blob' })
                    .then(response => {
                        // 1. 创建Blob对象
                        const blob = new Blob([response], { type: 'application/pdf' });

                        // 2. 生成临时预览URL
                        const blobUrl = window.URL.createObjectURL(blob);

                        // 3. 在新窗口打开（浏览器内置PDF预览）
                        const previewWindow = window.open(blobUrl, '_blank');

                        // 4. 处理窗口加载失败的情况
                        if (!previewWindow || previewWindow.closed) {
                            this.$message.error('浏览器阻止了弹窗，请允许弹窗后重试');
                            window.URL.revokeObjectURL(blobUrl);
                        }
                    })
                    .catch(error => {
                        // 统一错误处理（复用下载的错误处理逻辑）
                        this.handlePreviewError(error);
                    });
            }).catch(() => { });
        },

        // 新增预览错误处理方法（复用下载的错误逻辑）
        handlePreviewError(error) {
            if (error.response) {
                if (error.response.data instanceof Blob) {
                    const reader = new FileReader();
                    reader.onload = () => {
                        try {
                            const errorJson = JSON.parse(reader.result);
                            this.$message.error(errorJson.msg || '预览失败');
                        } catch (e) {
                            this.$message.error('文件格式错误，无法预览');
                        }
                    };
                    reader.readAsText(error.response.data);
                } else {
                    this.$message.error(`预览失败：${error.response.statusText}`);
                }
            } else {
                this.$message.error('网络错误，请检查连接');
            }
        },

        // 新增格式验证方法
        isPdfFormat(format) {
            return format.toLowerCase() === 'pdf'
        },



    }
}
</script>


<style scoped>
.disabled-preview-btn {
  color: #c0c4cc !important;
  cursor: not-allowed !important;
  background-image: none !important;
}
</style>
